<template>
    <!-- 整个页面的容器，是灰色的背景 -->
    <div class="cartPageWrap" :style="{height: pageHeight + 'px'}">

        <!-- 确认订单title，和返回上一级箭头 -->
        <div class="header">
            <van-icon @click="goBackCart" name="arrow-left" style="margin:0 .3rem 0 0;" />确认订单
        </div>
        <!-- 确认地址栏，开始 -->
        <div class="confirmAddress">
            <van-icon name="location-o" class="addressIcon" size=".6rem"></van-icon>
            <div class="addressInfo">
                <p class="p1">
                    <span>董志强</span>
                    <span>15968168346</span>
                    <span>默认</span>
                </p>
                <p>浙江省杭州市萧山区宜人居公寓</p>
            </div>
        </div>
        <!-- 确认地址栏，结束 -->

        <!-- 确认商品信息，开始 -->
        <div class="shopInfoBox">
            <h1>
                <div class="allGoodsCheckBoxIcon">华为商城自营</div>
            </h1>
            <!-- 购物车中的商品列表 -->
            <div class="goodsPanels">
                <!-- 单个的某个商品，开始 -->
                <div class="goodsItem" v-for="n in getAllGoods.arr" :key="n.goods_key">
                    <span class="goodsImg">
                        <img :src="n.goods_img" alt="">
                    </span>
                    <!-- 产品信息，开始 -->
                    <div class="goodsInfo">
                        <p class="p1">{{n.goods_title}}</p>
                        <p class="p2"> {{n.goods_des}}</p>
                        <p class="p3">×{{n.goods_num}}</p>
                    </div>
                    <!-- 产品信息，结束 -->
                </div>
                <!-- 单个的某个商品，结束 -->
                <!-- 赠品 -->
                <div class="otherGoodsInfo">
                    <span class="p1">【赠品】</span>
                    <p class="p2">华为充电器SuperCharge快充版（Max 40W）</p>
                    <p class="p3">x2</p>
                </div>
                <!-- 配送 -->
                <div class="deliveryDate">
                    <span>配送</span>
                    <i>
                        <van-icon name="warning-o" size=".5rem"></van-icon>
                    </i>
                    <label>标准配送</label>
                </div>
                <!-- 发票 -->
                <div class="invoiceType">
                    <span class="spanL">发票</span>
                    <span class="spanR">电子普通发票-个人</span>
                </div>
            </div>
        </div>
        <!-- 确认商品信息，结束 -->

        <!-- 优惠券 -->
        <div class="couponName">
            <span>优惠券</span>
            <label>无可用优惠券</label>
        </div>

        <!-- 积分、总价、配送费，开始 -->
        <div class="priceCenter">
            <!-- 积分 -->
            <div class="priceCenterItem">
                <span class="p1">积分</span>
                <i class="p2">
                    <van-icon name="warning-o" size=".5rem"></van-icon>
                </i>
                <van-switch size=".4rem" v-model="switchChecked" active-color="#ee0a24" class="p5" />
                <em class="p4">抵0.05元</em>
                <em class="p3">使用5积分, </em>
            </div>
            <!-- 商品总价 -->
            <div class="priceCenterItem">
                <span class="p1">商品总价</span>
                <em class="p3 fontBold">￥{{totalMoney_goodsNum.arr.money}}</em>
            </div>
            <!-- 配送费 -->
            <div class="priceCenterItem">
                <span class="p1">配送费</span>
                <i class="p2">
                    <van-icon name="warning-o" size=".5rem"></van-icon>
                </i>
                <em class="p4 fontBold">+￥0</em>
            </div>
            <!-- 商品优惠 -->
            <div class="priceCenterItem">
                <span class="p1">商品优惠</span>
                <em class="p4 fontBold">-￥1200</em>
            </div>
            <!-- 积分 -->
            <div class="priceCenterItem">
                <span class="p1">积分</span>
                <em class="p4 fontBold">-￥0.05</em>
            </div>
        </div>
        <!-- 积分、总价、配送费，结束 -->

        <!-- 提交订单栏，footer，开始 -->
        <div class='submitOrder'>
            <span class="spanl">￥{{totalMoney_goodsNum.arr.money}}</span>
            <van-button round type="danger" to="./cashier" class="subBtnStyle">提交订单</van-button>
        </div>
        <!-- 提交订单栏，footer，结束 -->

    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import requestFn from '@/utils/https'
// 获得当前页面的高度
let pageHeight = document.documentElement.clientHeight;
// console.log(pageHeight)

const switchChecked = ref(true)

// 返回购物车
const router = useRouter()
const goBackCart = () => {
	router.push({
		path: '/shoppingCart'
	})
}

// 页面一打开，就直接请求所有商品数量、总价
let totalMoney_goodsNum = reactive({
    arr: []
})
requestFn({
    url: '/mysql_getGoodsMoney',
    method: 'get',
}).then(res => {
    // console.log(res)
    totalMoney_goodsNum.arr = res.data
})

// 页面刚打开的时候，从mysql中加载商品的数量
// 从shopping_cart购物车表中，取得所有商品信息
let getAllGoods = reactive({
    arr: []
})
requestFn({
    url: '/mysql_getShoppingGoodsInfo',
    method: 'get'
}).then( res => {
    console.log(res)
    getAllGoods.arr = res.data.goodsObj
})

</script>

<style lang="less" scoped>
/* 整个页面的容器，是灰色的背景 */
.cartPageWrap{
    background: #f1f3f5;
    padding: 0 .5rem;
    /* 确认订单title，和返回上一级箭头 */
    .header{
        margin: .2rem .5rem;
        font-size: .6rem;
        text-align: left;
        height: 1rem;
        padding: .2rem 0;
    }
    /* 确认地址栏 */
    .confirmAddress{
        overflow: hidden;
        background: #fff;
        padding: .2rem;
        border-radius: .3rem;
        .addressIcon{
            float: left;
            margin: .3rem .3rem 0 .2rem;
        }
        .addressInfo{
            float: left;
            p{
                text-align: left;
            }
        }
    }
    // 确认商品信息
    /* 商品列表 */
    .shopInfoBox{
        margin: 0.3rem 0 0 0;
        padding: .3rem;
        background: #fff;
        border-radius: .3rem;
        h1{
            // overflow: hidden;
            .allGoodsCheckBoxIcon{
                background-image: url('https://res.vmallres.com/uomcdn/CN/sc/shop/VMALL-HUAWEIDEVICE/202203/90BC709CA0BD01DA1DDFA510535ACE6A.png');
                background-size: .6rem;
                background-repeat: no-repeat;
                margin: .3rem 0;
                text-align: left;
                padding: .1rem 0 .2rem .7rem;
            }
        }
        /* 购物车中的所有的商品的列表容器 */
        .goodsPanels{
            overflow: hidden;
            clear: both;
            .goodsItem{
                overflow: hidden;
                clear: both;
                position: relative;
                .goodsImg{
                    float: left;
                    width: 2rem;
                    height: 2rem;
                    img {
                        width: 2rem;
                        height: 2rem;
                    }
                }
                .goodsInfo{
                    float: left;
                    width: 6rem;
                    overflow: hidden;
                    
                    .p1{
                        font-size: .38rem;
                        text-align: left;
                        margin-bottom: .2rem;
                    }
                    .p2{
                        color: #666;
                        text-align: left;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        margin-bottom: .2rem;
                    }
                    .p3 {
                        position: absolute;
                        right: 0;
                        top: .6rem;
                        color: #f00;
                    }
                }
            }
            /* 赠品信息 */
            .otherGoodsInfo{
                overflow: hidden;
                clear: both;
                margin:.5rem 0;
                .p1{
                    float: left;
                    margin-right: .65rem;
                }
                .p2{
                    float: left;
                    width: 60%;
                    padding:0 0 0 .5rem;
                    /* //溢出隐藏 */
                    overflow: hidden;
                    /* //禁止换行 */
                    white-space: nowrap;
                    /* //... */
                    text-overflow: ellipsis;
                    background-image: url('https://res.vmallres.com/pimages//product/6941487208531/142_142_FDA0EDDBE95421AC08DCC5DD197E236CED6ECAB7F1F837C3mp.png');
                    background-repeat: no-repeat;
                    background-size: .5rem;
                }
                .p3{
                    float: right;
                }
            }
            // 配送
            .deliveryDate{
                overflow: hidden;
                padding: .2rem;
                border-bottom: 1px solid #ddd;
                span {
                    float: left;
                    margin-right: .2rem;
                }
                i {
                    float: left;
                }
                label {
                    float: right;
                }
            }
            // 发票
            .invoiceType{
                overflow: hidden;
                padding: .2rem;
                margin: .4rem 0 0 0;
                .spanL{
                    float: left;
                }
                .spanR{
                    float: right;
                }
            }
        }
    }
    // 优惠券
    .couponName{
        overflow: hidden;
        background: #fff;
        margin: .4rem 0;
        border-radius: .3rem;
        padding: .5rem;
        span{
            float: left;
        }
        label{
            float: right;
        }
    }
    /* 积分、总价、配送费，开始 */
    .priceCenter{
        .priceCenterItem{
            overflow: hidden;
            margin: .5rem .4rem;
            .p1{
                float: left;
            }
            .p2{
                float: left;
                margin-left: .2rem;
            }
            .p3, .p4, .p5 {
                float: right;
            }
            .p4{
                color:#f00
            }
            .p5{
                margin-left: .2rem;
            }
            .fontBold{
                font-weight: bold;
            }
        }
    }
    /* 提交订单栏，footer */
    .submitOrder{
        position: fixed;
        bottom: 0;
        left: 0;
        background: #f1f3f5;
        width: 100%;
        overflow: hidden;
        height: 1.5rem;
        z-index: 999;
        .spanl{
            color: #f00;
            font-size: .6rem;
            float: left;
            margin-left: .3rem;
            line-height: 1.5rem;
        }
        .subBtnStyle{
            float: right;
            margin: .2rem .5rem 0 0;
        }
    }
}
</style>
